{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<link rel="stylesheet" type="text/css" href="/Public/Css/front/front_css/sama_part2.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/refresh_load.css?version={$version}"/>
<style type="text/css">
	/*html,body{
		width: 100%;
		height: 100%;
	}*/
	#load_wrapper{
		margin-top: 0rem;
	}
	#pullUp{
	text-align: center;
  	line-height: 34px;
  	width: 50%;
  	margin: 0 auto;
}
#pullDown{
	width:2rem;
	height:2rem;
	background:url(/Public/Images/front/front_img/ico_loading_chuang.png) 0 0.5rem no-repeat;
	background-size:100% 2rem;
	margin:0 auto;
	padding-top:0.5rem;
	position: relative;
}
.pullUpLabel{
	font-size: 13px;
  	color: #909090;
}
#pullUp .pullUpIcon  {
  border:#F00 0px solid;
  display: inline-block;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: -6px;
  width:20px; height:20px;
  background:url(/Public/Images/front/pull-icon@2x.png) 0 0 no-repeat;
  -webkit-background-size:20px 20px; background-size:20px 20px;
  -webkit-transition-property:-webkit-transform;
  -webkit-transition-duration:250ms;
}
#pullUp .pullUpIcon  {
  -webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp.loading .pullUpIcon {
  -webkit-transform:rotate(0deg) translateZ(0);
  -webkit-transition-duration:0ms;
  -webkit-animation-name:loading;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}	
	.tag {
	
    font-size: 0.5rem;
    color: #FFFFFF;
    line-height: 0.75rem;
    padding: 0 0.25rem;
    background: #FF6600;
    border-radius: 2px;
    display: inline-block;
}
.touxian{
	width: 90%;
	height: 0.75rem;
	position: absolute;
	top:8.0rem;
	left:5%;
	text-align: center;
}
</style>
{/block}
{block name="content"}
<div id="load_wrapper">
<div id="scroller">
	<div id="pullDown">
		    <span class="pullDownIcon"></span>
		</div>
<div class="others_personal_head_box">
	<img class="blur" src="/Public/Images/front/front_img/cxq_xuangmu_pic3x.png" style="width:110%;height:120%;margin:-10% -10% -10% -10%;"><!--背景图片，根据头像变化-->

	<div class="return_icon_white"></div>

	<img class="others_personal_head" src="/Public/Images/front/front_img/cxq_xuangmu_pic3x.png"><!--个人头像-->
	<!--男女标志-->
	<!-- <div class="icon_gender_man"></div> -->
	<div class="icon_gender_male"></div>

	<div class="others_info_icon">
		<div class="point"></div><!--有消息时显示这个红点-->	
	</div>

	<p1>花花是世界</p1><!--昵称-->
	<div class="touxian">
	<i class="tag">女神认定</i>
	<i class="tag">颜值认定</i>
	<i class="tag">颜值认定</i>
	<i class="tag">颜值认定</i>
	<i class="tag">颜值认定</i>
	<i class="tag">颜值认定</i>
	
	</div>
	<!--如果没有头衔-->
	<!-- <div class="no_title"></div><p2 >尚未取得任何头衔</p2> -->

	
</div>

<div class="others_personal_info">
	
	<div class="attention">关注</div>
	<div class="fans">粉丝</div>
	<div class="channel">关注频道</div>

	<div class="attention_number">1011</div>
	<div class="fans_number">1011</div>
	<div class="channel_number">1011</div>
</div>





<!--没帖子时-->
<!-- <div class="dynamic_box"> -->
	
	<!--设置了动态不可见-->
	<!-- <img class="dynamic_icon" src="/Public/Images/front/front_img/icon_personal_dynamicinvisible@3x.png">
	<div class="dynamic_describe">他设置了动态不可见</div>	 -->

	<!--还没有任何动态-->
	<!-- <img class="dynamic_icon" src="/Public/Images/front/front_img/icon_nodynamic_personal@3x.png">
	<div class="dynamic_describe">他还没有发表任何动态呢</div>
</div> -->

<!--有帖子时-->

	<div class="post_box">
	
		<div class="his_post">他的帖子</div>
		<ul class="post_content">
			<li class="date" >01</li><li class="channel_name">赞赏频道</li>
			<li class="month">十二月</li>
			<li class="post_title">一花一世界，一叶一菩提</li>
			<li class="post_brief">一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。</li>
			<li class="post_pic_box">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
			</li>
			<li class="look">查看</li><div class="look_number">999</div>
			<li class="comment">评论</li><div class="comment_number">999</div>

		</ul>

		<ul class="post_content">
			<li class="date" >01</li><li class="channel_name">赞赏频道</li>
			<li class="month">十二月</li>
			<li class="post_title">一花一世界，一叶一菩提</li>
			<li class="post_brief">一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。</li>
			<li class="post_pic_box">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
			</li>
			<li class="look">查看</li><div class="look_number">999</div>
			<li class="comment">评论</li><div class="comment_number">999</div>

		</ul>

		<ul class="post_content">
			<li class="date" >01</li><li class="channel_name">赞赏频道</li>
			<li class="month">十二月</li>
			<li class="post_title">一花一世界，一叶一菩提</li>
			<li class="post_brief">一朵花就是一个宇宙。一个人身也是一个宇宙。万物渺小或者宏大，微观世界或者宏观世界，都是一个世界。</li>
			<li class="post_pic_box">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
				<img class="post_pic" src="">
			</li>
			<li class="look">查看</li><div class="look_number">999</div>
			<li class="comment">评论</li><div class="comment_number">999</div>

		</ul>

	</div>
	<div id="pullUp" style="margin-bottom:2.5rem">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
		</div>
</div>
</div>

	


<div class="attention_chat_box">
	<!--未关注按钮-->
	<div class="unattentioned">
		<div class="icon_add"></div>
		<p>关注</p>
	</div>

	<!--已关注-->
	<div class="attentioned" style="display:none">
		<div class="icon_concerned"></div>
		<p>已关注</p>
	</div>

	<div class="line_mid"></div>

	<div class="chat">
		<div class="icon_chat"></div>
		<p>私聊</p>
	</div>
</div>


<!--关注弹窗-->

	<div class="PopupConcerned">
		<div class="done"></div>
		<p>关注已成功</p>
	</div>

	<div class="Popupcancel">
		<div class="done"></div>
		<p>已取消关注</p>
	</div>

{/block}
{block name="js"}
<script type="text/javascript" src="__JS__/front/front_js/iscroll.js"></script>
<script type="text/javascript" src="__JS__/front/front_js/otherPersonalCenter.js"></script>
{literal}
	<script type="text/javascript">
	var total = 1
    var firstRow = 1

		$('.attention_chat_box').on('click','.unattentioned',function(){
			showPopUP_concerned();
			$('.unattentioned').hide();
			$('.attentioned').show();
			$('.Popupcancel').stop();

		});
		$('.others_personal_info').on('click','.attention',function(){
			window.location.href ='/Index/his_concern'
		});

		$('.others_personal_info').on('click','.fans',function(){
			window.location.href ='/Index/his_fans'
		});

		$('.others_personal_info').on('click','.channel',function(){
			window.location.href ='/Index/his_concernChannel'
		});


		function showPopUP_concerned(){
			
			$('.PopupConcerned').fadeIn(1500);
			console.log(0);
			$('.PopupConcerned').fadeOut(1500);

		}
		
		$('.attention_chat_box').on('click','.attentioned',function(){
			showPopUP_unconcerned();
			$('.unattentioned').show();
			$('.attentioned').hide();
			$('.PopupConcerned').stop();
		});

		function showPopUP_unconcerned(){
			$('.Popupcancel').fadeIn(1500);
			console.log(9);
			$('.Popupcancel').fadeOut(1500);
			}
	</script>
{/literal}
{/block}



